<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>商品管理</title>
		<link rel="stylesheet" href="../../../resources/css/shop/shopmanage.css" />
		<link rel="stylesheet" href="../../../resources/layui/css/layui.css" />
		<script type="text/javascript" src="../../../resources/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="../../../resources/layui/layui.js"></script>
	</head>
	<style>
		.layui-table-cell {
			height: 100%;
			max-width: 100%;
		}
	</style>

	<body>
		<div class="main ">

			<div class="layui-input-inline">
				<button id="addgoods" class="layui-btn layui-btn-md layui-btn-danger">添加商品</button>
			</div>
			<form action="" method="post" class="layui-form" style="float: right;">
				<div class="layui-inline">
					<input type="text" name="course_name" placeholder="请输入商品" class="layui-input" />
				</div>
				<button class="layui-btn" lay-submit data-type="reload" lay-filter="search" id="search">搜索</button>
			</form>
			<table id="shoptable" lay-filter="shop"></table>
		</div>
		
		<script type="text/html" id="switchTpl">
			<input type="checkbox" name="articleState" value="{{d.articleState}}" lay-skin="switch" lay-text="展示|隐藏" lay-filter="on" {{ d.articleState==0 ? 'checked' : '' }}>
		</script>
		
		<script>
			layui.use('table', function() {
				var table = layui.table;
				table.render({
					elem: '#shoptable',
					url: '/goods/queryPagingGoods.action',
					height: '750',
					limit: 6,
					limits: [6, 10, 20],
					page: true,
					cols: [
						[{
							type: 'checkbox',
							align: 'center'
						}, {
							field: 'id',
							width: 100,
							title: '商品ID',
							sort: true,
							align: 'center'
						}, {
							field: 'goodsName',
							width: 200,
							title: '商品名称',
							align: 'center'
						}, {
							field: 'goodsScore',
							width: 200,
							title: '商品所需积分',
							sort: true,
							align: 'center'
						}, {
							field: 'goodsUrl',
							title: '图片',
							MinWidth: 200,
							templet: '<div><img src="{{ d.pic}}" style="margin-right:40px"><a target="_blank" href="{{ d.pic}}">{{ d.pic}}</a></div>',
							style: 'height:60px'
						}, {
							field: 'goodsClassifyId',
							width: 150,
							title: '商品分类',
							align: 'center'
						}, {
							field: 'goodsState',
							width: 150,
							title: '商品状态',
							templet: '#switchTpl',
							sort: true,
							align: 'center'
						}, {
							title: '操作',
							width: 178,
							align: 'center',
							toolbar: '#toolbar'
						}]
					],
					id: 'reload'
					
				});
				
				
				var $ = layui.$,
					active = {

						reload: function() {
							var articletitlte = $('#articletitlte');
							table.reload('reload', {
								page: {
									curr: 1
								},
								where: {
									"article.articleTitle": articletitlte.val()
								},
								options: {
									scriptCharset: 'utf-8'
								}
							});
						}
					};
				$('#search').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
				
				
				table.on('tool(shop)', function(obj) {
					var data = obj.data;
					var layEvent = obj.event;
					var tr = obj.tr;
					if(layEvent === 'del') { //删除
						layer.confirm('真的删除该商品吗', function(index) {
							obj.del();
							layer.close(index);
							//向服务端发送删除指令
						});
					} else if(layEvent === 'edit') { //编辑
						layer.alert('编辑行：<br>' + JSON.stringify(data))
						//do something
						//同步更新缓存对应的值
						//obj.update({

						//});
					}
				});
			});
		</script>
		<script type="text/html" id="toolbar">
			<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon-set layui-icon"></i>编辑</a>
			
			<a class="layui-btn layui-btn-danger layui-btn-xs " lay-event="del"><i class="layui-icon-close layui-icon"></i>删除</a>
		</script>

		<script>
			layui.use('layer', function() {
				var layer = layui.layer;
				$('#addgoods').on('click', function() {
					var index = layer.open({
						type: 2,
						title: '添加商品',
						shadeClose: false, //点击遮罩关闭层
						area: ['900px', '620px'],
						content: '/pages/admin/shop/addshops.html'
					});
				});
			});
		</script>
		
		
		<script>
			layui.use("form", function() {
				var form = layui.form;
				form.on('switch(on)', function(obj) {
					layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
				});
			});
		</script>

		<script>
			layui.use('form', function() {
				var form = layui.form,
					layer = layui.layer;

				//监听短信开关

				form.on('switch(on)', function(data) {
					var loadding;
					var alert_value = this.checked ? '1' : '0';
					//短信通知状态更新
					$.ajax({
						type: 'POST',
						url: '',
						data: {

						},
						beforeSend: function() {
							loadding = layer.msg('正在切换中，请稍候', {
								icon: 16,
								time: false,
								shade: 0.8
							});
						},
						error: function(data) {
							console.log(data);
							layer.msg('数据异常，操作失败！');
						},
						success: function(data) {
							if(data == "1") {
								setTimeout(function() {
									layer.close(loadding);
									layer.msg('操作成功！');
								}, 2000);
							} else {
								layer.msg('数据异常，操作失败！');
							}
						}
					});

				});

			});
		</script>
		
		
	</body>

</html>